<template>
  <div class="workflow-page">
    <div class="page-header">
      <h1>肺部CT诊断工作流</h1>
      <a-space>
        <a-tag color="blue">患者ID: P20231015</a-tag>
        <a-tag color="green">状态: 进行中</a-tag>
      </a-space>
    </div>
    
    <div class="page-content">
      <a-steps :current="currentStep" class="workflow-steps" type="arrow">
        <a-step title="CT图像上传与分割" description="上传并处理肺部CT图像" />
        <a-step title="病历报告上传" description="上传患者病历资料" />
        <a-step title="诊断报告生成" description="AI辅助生成诊断报告" />
      </a-steps>
      
      <div class="step-content">
        <!-- 步骤1: CT图像上传与分割 -->
        <div v-if="currentStep === 0">
          <UploadCTStep @next="nextStep" @save="saveStepData" />
        </div>
        
        <!-- 步骤2: 病历报告上传 -->
        <div v-if="currentStep === 1">
          <UploadReportStep @next="nextStep" @prev="prevStep" @save="saveStepData" />
        </div>
        
        <!-- 步骤3: 诊断报告生成 -->
        <div v-if="currentStep === 2">
          <GenerateReportStep @prev="prevStep" @complete="completeWorkflow" :workflowData="workflowData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import UploadCTStep from '@/components/workflow/UploadCTStep.vue';
import UploadReportStep from '@/components/workflow/UploadReportStep.vue';
import GenerateReportStep from '@/components/workflow/GenerateReportStep.vue';
import { useWorkflowStore } from '@/stores/workflow';

const currentStep = ref(0);
const workflowStore = useWorkflowStore();
const workflowData = reactive({
  patientInfo: {
    id: 'P20231015',
    name: '张三',
    age: '45',
    gender: '男',
    department: '呼吸内科'
  },
  ctImages: [],
  segmentationResults: [],
  medicalRecord: null,
  diagnosisReport: null,
  ctClipPrediction: null,
  ctUpload: null
});

// 初始化患者信息
onMounted(() => {
  workflowStore.updatePatientInfo(workflowData.patientInfo);
});

const nextStep = () => {
  if (currentStep.value < 2) {
    currentStep.value++;
  }
};

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

const saveStepData = (stepData: any) => {
  // 根据当前步骤保存数据
  if (currentStep.value === 0) {
    // 保存CT上传和分割结果数据
    workflowData.ctUpload = stepData; // 保存整个对象，包含完整的分割结果
    workflowData.ctImages = stepData.ctImages || [];
    workflowData.segmentationResults = stepData.segmentationResults || [];
    
    // 在控制台打印保存的数据，方便调试
    console.log('保存CT上传数据:', workflowData.ctUpload);
  } else if (currentStep.value === 1) {
    workflowData.medicalRecord = stepData.medicalRecord;
    workflowStore.saveMedicalRecord(stepData.medicalRecord);
  }
};

const completeWorkflow = (finalReport: any) => {
  workflowData.diagnosisReport = finalReport;
  // 保存到Pinia状态管理
  workflowStore.saveDiagnosisReport(finalReport);
  // 这里可以添加保存到服务器的逻辑
  console.log('工作流完成', workflowData);
};
</script>

<style scoped>
.workflow-page {
  padding: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
}

h1 {
  font-size: 24px;
  margin: 0;
  color: var(--color-text-1);
  font-weight: 600;
}

.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workflow-steps {
  margin-bottom: var(--spacing-xl);
}

.step-content {
  background-color: var(--color-bg-2);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  flex: 1;
  overflow: auto;
}
</style> 